

<template>
    <div class="page-box">
        <el-row class="page-box-item">
            <el-col :span="4" style="padding-left: 5px; padding-right: 5px;">
  
                <el-card shadow="never"  style="border:none;border-right: 1px solid #f1f1f1;">
                    <el-input placeholder="过滤" v-model="filterText" style="margin-bottom: 10px;"></el-input>
                    <el-tree :data="ItemTypeData" :props="defaultProps" @node-click="handleNodeClick" ref="tree"
                        :filter-node-method="filterNode"></el-tree>
                </el-card>
            </el-col>
            <el-col :span="20" style="padding-left: 5px; padding-right: 5px;">
                <div class="page-search">
                    <div>
                        <label>物料编码</label>
                        <el-input v-model="searchForm.ItemCode" style="width: 160px;" placeholder="请输入物料编码"></el-input>
                    </div>
                    <div>
                        <label>物料名称</label>
                        <el-input v-model="searchForm.ItemName" style="width: 160px;" placeholder="请输入物料名称"></el-input>
                    </div>
                    <div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>
  
  
  
                <div class="page-section">
                    <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="ItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Vendor" label="供应商" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="LineType" label="线别" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="EffectiveDate" label="有效日期" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="Kind" label="品类" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="PurchasePrice" label="采购价" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="SalePrice" label="销售价" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="ItemTypeName" label="所属分类" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="StockCount" label="入库数量" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="SalesCount" label="出库数量" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                               <b>{{ scope.row.CurrCount }}</b>
                            </template>
                        </el-table-column>
  
  
  
                        <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.EnableFlag === 'Y'">是</el-tag>
                                <el-tag type="warning" v-else>否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="SafeStockFlag" label="安全库存" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.SafeStockFlag === 'Y'">是</el-tag>
                                <el-tag type="warning" v-else>否</el-tag>
                            </template>
                        </el-table-column>
  
                        <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
                    </el-table>
  
  
                    <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                        :TotalCount="pageDomain.TotalCount" />
                </div>
              <div class="page-box-footer">
                  <el-button type="primary" @click="checked" >确认选择</el-button>
              </div>
            </el-col>
        </el-row>
  
  
    </div>
  </template>
  <script>
  
  
  import Pagination from '@/components/Pagination.vue';
  export default {
  props:{
    WareHouseId:{
        require:true,
        type:String
    },
    ItemList:{
        require:true,
        type:Array
    }
  },  
    components: {
        Pagination
    },
    mounted() {
        this.dataBind();
  
        this.getItemType();
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    data() {
        return {
  
            filterText: '',
            //搜索字段
            searchForm: {
                ItemCode: '',
                ItemName: '',
                ItemTypeId:-1
            },
            ItemTypeData: [],
            defaultProps: {
                children: 'Children',
                label: 'ItemTypeName'
            },
  
  
  
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false
  
  
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.ItemTypeName.indexOf(value) !== -1;
        },
        checked(){
  
  
  
          //获取选中的每一项
  
          if(this.$refs.dataForm.selection.length<=0){
              this.showNotify('请选择一项');
              return;
          }
  
  
  
          this.$refs.dataForm.selection.map(model=>{
              var arr = this.ItemList.filter(x=>x.ItemId==model.Id);
              if(arr.length <=0){
                console.log('111');
                this.$set(model,'ItemId',model.Id);
                this.ItemList.push(model);
              }
             
          })
  
  
          
  
          this.$emit('callback');
        },
  
  
  
        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset() {
            this.searchForm.ItemCode = '';
            this.searchForm.ItemName = '';
            this.searchForm.ItemTypeId=-1;
        },
  
        //获取数据
        dataBind() {
            this.isLoading = true;
            this.$http.get('/api/Item/GetItemStock',
                {
                    params: {
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        ItemCode: this.searchForm.ItemCode,
                        ItemName: this.searchForm.ItemName,
                        ItemTypeId:this.searchForm.ItemTypeId,
                        WareHouseId:this.WareHouseId,
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },
        getItemType() {
            this.$http.get('/api/ItemType')
                .then(res => {
                    this.ItemTypeData = res.Data;
                    this.ItemTypeData.unshift({ Id: -1, ItemTypeName: '全部' });
                })
        },
        handleNodeClick(data) {
            this.searchForm.ItemTypeId = data.Id;
            this.dataBind();
        },
        //分页方法
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },
  
  
  
    }
  }
  </script>